<template>
  <!-- 问候功能 -->
  <Top-Page class="greetings-box">
    <NavBar title="问候功能" :class="navBar_class" left-arrow @click-left="onClickLeft" />

    <scroll-view class="" scroll-y @scrolltoupper="firstApi" style="height: 100vh" :scroll-top="scrollTop">
      <view class="container">
        <!-- 顶部加载提示 -->
        <view v-if="isLoadingPrevious" class="loading-text">加载中...</view>

        <!-- 列表项 -->
        <view v-for="(item, index) in list" :key="index" class="list-item">
          <template v-if="item.timing">
            <view class="timed-task__title timed-task__title-1" v-if="item.is_send == 0">
              <view>定时发送：{{ item.send_time }}</view>
              <view @click="cancelItem(item.id, index)">取消</view>
            </view>
            <view class="timed-task__title timed-task__title-2" v-if="item.is_send == 1">
              <view>于：{{ item.send_time }}定时发送</view>
            </view>
          </template>

          <view class="content">
            <view clas="content-text" v-if="item.type === 'text'">{{ item.content }}</view>
            <image v-if="item.type === 'image'" :src="item.content" />
            <video v-if="item.type === 'video'" :src="item.content" :poster="`${item.content}?vframe/jpg/offset/1`" />
          </view>

          <view class="to-user-title">
            {{ item.is_send == 1 ? '已经发送给' : '发送给' }}{{ item.to_user.length }}个朋友:
          </view>

          <view class="to-users">{{ item.to_user.join() }}</view>

          <view class="try-again" @click="toMassTexting(item.id, item.to_user)">再发一条</view>
        </view>
      </view>
    </scroll-view>
    <view class="new-mes" @click="toNewGreeting">新建问候</view>
  </Top-Page>
</template>

<script>
import pinia from '@/store/index';
import { useMsgStore } from '@/store/message';
import NavBar from '@/components/NavBar/NavBar.vue';
const msgStore = useMsgStore(pinia);
export default {
  data() {
    return {
      page: 0,
      limit: 12,
      list: [],
      scrollTop: 0, // 控制scroll-view的滚动位置
      isLoadingPrevious: false, // 标识是否正在加载之前的数据
      finished: false
    };
  },
  components: { NavBar },
  created() {
    this.firstApi();
    msgStore.getContactsData();
  },
  methods: {
    firstApi() {
      if (this.finished) {
        uni.showToast({
          title: '没有更多了',
          icon: 'none'
        });
        return;
      }

      if (this.isLoadingPrevious) return;

      this.isLoadingPrevious = true;

      this.$api.msgApi
        .getGreeting({
          page: ++this.page,
          limit: this.limit
        })
        .then((res) => {
          this.isLoadingPrevious = false;

          if (res.code === 0) {
            const data = res.data ?? [];
            this.list.push(...data.reverse());

            this.$nextTick(() => {
              this.getContentHeight();
            });

            data.length < this.limit && (this.finished = true);
          }
        });
    },
    //再发一条
    toMassTexting(id, userNames) {
      uni.navigateTo({
        url: `/pages/greetings/mass-texting/mass-texting?id=${id}&userNames=${userNames.join()}`
      });
    },
    //取消定时任务
    cancelItem(id, index) {
      this.$api.msgApi.greetingCancel({ id: id }).then((res) => {
        if (res.code == 0) {
          this.list.splice(index, 1);
        }
      });
    },
    getContentHeight() {
      // 使用选择器查询 scroll-view 的高度
      const query = uni.createSelectorQuery().in(this);
      query
        .select('.container')
        .boundingClientRect((rect) => {
          // 设置 scrollTop 为容器高度，使页面滚动到底部
          this.scrollTop = rect.height;
        })
        .exec();
    },
    //新建问候
    toNewGreeting() {
      uni.navigateTo({
        url: '/pages/greetings/new-greeting/new-greeting'
      });
    },
    onClickLeft() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
